<template>
	<view class="sing-in-div">
		<view class="nav-bar">
			<view class="back-button" @click="goBack">
				<text>〈</text>
			</view>
			<view class="room-number">抢答</view>
			<view class="nav-right">•••</view>
		</view>
	    <view class="sing-in-div-body">
	        <view class="sing-in">
	            <view class="sing-in-img">
					<image :src="image" mode="aspectFit"></image>
	            </view>
	            <view class="sing-in-message">
	                <view class="students-list-container">
	                    <view class="students-list">
	                        <block v-for="(student, index) in students" :key="index">
								<view class="student-item">
									<image class="avatar" src="../../static/微信图片_202412021128313.jpg" mode="aspectFill"></image>
									<text>{{student}}</text>
									<text v-if="index === 0" class="thumb">👍</text>
								</view>
	                        </block>
	                    </view>
	                </view>
	            </view>
	        </view>
	    </view>
	</view>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import {onLoad} from '@dcloudio/uni-app'; //yh
const students = ref([]);

const scrollContainer = ref(null);
const isQuicked = ref({}) ;
const image = ref('') ;

onLoad((options) => {
	isQuicked.value =  JSON.parse(decodeURIComponent(options.isQuicked)) ;
	console.log('----------',isQuicked.value);
	
	if(isQuicked.value.isQuick=="抢到了"){
		image.value = "../../static/singy.png"
		students.value.push(isQuicked.value.quickUsername) ;
	}else{
		image.value = "../../static/noSingIn.png" 
	} ;
});

onMounted(() => {
	if (scrollContainer.value) {
		console.log('Scroll container:', scrollContainer.value);
		setupTouchEvents();
	} else {
		console.error('Scroll container is not defined');
	}
});

onBeforeUnmount(() => {
	removeTouchEvents();
	console.log("触屏了！");
});

function setupTouchEvents() {
	const container = scrollContainer.value;

	let startY = 0;
	let isTouching = false;
	let lastScrollTop = 0;

	function onTouchStart(event) {
		startY = event.touches[0].clientY;
		isTouching = true;
		lastScrollTop = container.scrollTop;
	}

	function onTouchMove(event) {
		if (!isTouching || !container) return;
		event.preventDefault(); // 阻止默认的滚动行为

		const currentY = event.touches[0].clientY;
		const deltaY = startY - currentY;

		container.scrollTop = Math.max(0, Math.min(lastScrollTop - deltaY, container.scrollHeight - container.clientHeight));
		startY = currentY;
	}

	function onTouchEnd() {
		isTouching = false;
	}

	container.addEventListener('touchstart', onTouchStart);
	container.addEventListener('touchmove', onTouchMove, { passive: false });
	container.addEventListener('touchend', onTouchEnd);
}

function removeTouchEvents() {
	const container = scrollContainer.value;
	if (container) {
		container.removeEventListener('touchstart', onTouchStart);
		container.removeEventListener('touchmove', onTouchMove);
		container.removeEventListener('touchend', onTouchEnd);
	}
}

const goBack = () => {
	wx.switchTab({
	  url: '/pages/study/classroom-page'
	});
}
</script>

<style scoped>
.sing-in-div {
	background-color: #fff;
	width: 100vw;
	height: 100vh;
}

.nav-bar {
	background-color: #67C23A;
	width: 100%;
	height: 44px;
	padding-top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
}

.room-number {
	font-size: 17px;
	font-weight: 500;
}

.nav-right {
	padding: 10px 15px;
	font-size: 20px;
}

.back-button {
	padding: 10px 15px;
	font-size: 16px;
	color: #fff;
	display: flex;
	align-items: center;
	letter-spacing: 1px;
}

.back-button text {
	opacity: 0.95;
}

.sing-in-div-body {
	padding-top: 44px;
	width: 100%;
	min-height: calc(100vh - 44px);
	background-color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.sing-in {
	position: relative;
	width: 100%;
	padding: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.sing-in-img {
	margin-top: 40px;
}

image {
	width: 180px;
	height: 180px;
}

.sing-in-message {
	margin-top: 20px;
	width: 100%;
	text-align: center;
}

.sing-in-message-p {
	font-size: 17px;
	color: #333;
	margin: 20px 0;
	display: block;
}

.students-list-container {
	width: 100%;
	padding: 0 15px;
}

.students-list {
	width: 100%;
}

.student-item {
	display: flex;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid #f5f5f5;
}

.avatar {
	width: 40px;
	height: 40px;
	border-radius: 4px;
	margin-right: 12px;
}

.thumb {
	margin-left: auto;
	font-size: 16px;
}

/* 移除滚动条样式 */
::-webkit-scrollbar {
	display: none;
}
</style>